<template>
	<view class="wrap lbbg-wrap" style="background-color: #F4F6F5;padding-top:20rpx;padding-bottom: 20rpx;">
		<div class="lbbg-form">
			<view class="article-title lbbg-title">山东黄河河务局机关来宾报告</view>

			<view class="form-item" style="display: flex; align-items: center;">
				<text class="label" style="margin-right: 20rpx;">报告部门</text>
				<view class=""><input readonly type="text" v-model="reportDepartment" placeholder="请输入" /></view>
			</view>
			<view class="form-item" style="display: flex; align-items: center;">
				<text class="label" style="margin-right: 20rpx;">报告时间</text>
				<view class=""><input readonly type="text" v-model="reportTime" placeholder="请输入" /></view>
			</view>
			<view class="form-item" style="display: flex; align-items: center;">
				<text class="label" style="margin-right: 20rpx;">来宾单位</text>
				<view class="backColor"><input type="text" v-model="guestUnit" placeholder="请输入" /></view>
			</view>
			<view class="form-item" style="display: flex; align-items: center;">
				<text class="label" style="margin-right: 20rpx;">来宾人数</text>
				<view class="backColor"><input type="text" v-model="numberOfGuests" placeholder="请输入" /></view>
			</view>
			<view class="form-item" style="display: flex; align-items: center;">
				<text class="label" style="margin-right: 20rpx;">主宾姓名</text>
				<view class="backColor"><input type="text" v-model="mainGuestName" placeholder="请输入" /></view>
			</view>
			<view class="form-item" style="display: flex; align-items: center;">
				<text class="label" style="margin-right: 20rpx;">主宾职务</text>
				<view class="backColor"><input type="text" v-model="mainGuestPosition" placeholder="请输入" /></view>
			</view>
			<view class="form-item">
				<text class="label">主要陪同人员</text>
				<view class="backColor"><textarea v-model="accompanyingPersonnel" placeholder="请输入"></textarea></view>
			</view>
			<view class="form-item">
				<text class="label">行程安排</text>
				<view class="backColor"><textarea v-model="itinerary" placeholder="请输入"></textarea></view>
			</view>
			<view class="form-item">
				<text class="label">办公室意见</text>
				<view class="backColor">
					<textarea type="text" v-model="bgsyj" placeholder="请输入"></textarea>
				</view>
			</view>
			<view class="signature-label-text" v-if="!signImages['sGrid1'] || signImages['sGrid1'].length === 0">签章处</view>
			<view class="signature-section">
				<view id="sGrid1" class="image-grid">
					<image v-for="(value) in signImages['sGrid1']" v-if="sealOptionsKey.includes('sGrid1') && signImages['sGrid1'] && signImages['sGrid1'].length > 0" :src="value.imageUrl" class="seal-image" @click="handleLongPress(value.signUNID, value.hetype)"></image>
				</view>
			</view>
			<view class="form-item">
				<text class="label">领导批示</text>
				<view class="backColor">
					<textarea type="text" v-model="ldps" placeholder="请输入"></textarea>
				</view>
			</view>
			<view class="signature-label-text" v-if="!signImages['qfGrid'] || signImages['qfGrid'].length === 0">签章处</view>
			<view class="signature-section">
				<view id="qfGrid" class="image-grid">
					<image v-for="(value) in signImages['qfGrid']" v-if="sealOptionsKey.includes('qfGrid') && signImages['qfGrid'] && signImages['qfGrid'].length > 0" :src="value.imageUrl" class="seal-image" @click="handleLongPress(value.signUNID, value.hetype)"></image>
				</view>
			</view>
			<view class="form-item">
				<text class="label">备注</text>
				<view class="backColor">
					<textarea type="text" v-model="remarks" placeholder="请输入"></textarea>
				</view>
			</view>
		</div>
	</view>
</template>

<script>
export default {
  props: {
    formData: {
      type: Object,
      required: true
    },
    signImages: {
      type: Object,
      required: true
    },
    sealOptionsKey: {
      type: Array,
      required: true
    },
    handleLongPress: {
      type: Function,
      required: true
    }
  },
  computed: {
    reportDepartment: {
      get() {
        return this.formData.bgbmName || '';
      },
      set(value) {
        this.$emit('update:formData', { ...this.formData, bgbmName: value });
      }
    },
    reportTime: {
      get() {
        let timeValue = '';
        if (this.formData.bgDt) {
          timeValue = this.formData.bgDt.split(' ')[0];
        } else if (this.formData.updateDate) {
          timeValue = this.formData.updateDate.split(' ')[0];
        }
        return timeValue;
      },
      set(value) {
        this.$emit('update:formData', { ...this.formData, bgDt: value });
      }
    },
    guestUnit: {
      get() {
        return this.formData.lbdw || '';
      },
      set(value) {
        this.$emit('update:formData', { ...this.formData, lbdw: value });
      }
    },
    numberOfGuests: {
      get() {
        return this.formData.lbrs || '';
      },
      set(value) {
        this.$emit('update:formData', { ...this.formData, lbrs: value });
      }
    },
    mainGuestName: {
      get() {
        return this.formData.zbxm || '';
      },
      set(value) {
        this.$emit('update:formData', { ...this.formData, zbxm: value });
      }
    },
    mainGuestPosition: {
      get() {
        return this.formData.zbzw || '';
      },
      set(value) {
        this.$emit('update:formData', { ...this.formData, zbzw: value });
      }
    },
    accompanyingPersonnel: {
      get() {
        return this.formData.ptry || '';
      },
      set(value) {
        this.$emit('update:formData', { ...this.formData, ptry: value });
      }
    },
    itinerary: {
      get() {
        return this.formData.xcap || '';
      },
      set(value) {
        this.$emit('update:formData', { ...this.formData, xcap: value });
      }
    },
    bgsyj: {
      get() {
        return this.formData.bgsyj || '';
      },
      set(value) {
        this.$emit('update:formData', { ...this.formData, bgsyj: value });
      }
    },
    ldps: {
      get() {
        return this.formData.ldps || '';
      },
      set(value) {
        this.$emit('update:formData', { ...this.formData, ldps: value });
      }
    },
    remarks: {
      get() {
        return this.formData.remarks || '';
      },
      set(value) {
        this.$emit('update:formData', { ...this.formData, remarks: value });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
	.lbbg-wrap {
		background-color: #F4F6F5;
		padding-top: 20rpx;
		padding-bottom: 20rpx;

		.lbbg-form {
			background-color: white;
			padding: 40rpx 30rpx;
			border-radius: 8rpx;
			margin: 0 30rpx;
		}

		.lbbg-title {
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
			margin-bottom: 20rpx;
			color: rgb(0, 137, 217);
			border-bottom: 2rpx solid rgb(0, 137, 217);
			padding-bottom: 30rpx;
		}

		.form-item {
			display: block;
			margin-bottom: 20rpx;

			.label {
				width: auto;
				font-size: 28rpx;
				color: #333;
				flex-shrink: 0;
				margin-bottom: 10rpx;
			}

			.backColor {
				flex: 1;
				background-color: rgb(244, 246, 245);
				border-radius: 8rpx;
				padding: 18rpx 24rpx;
				font-size: 28rpx;
				color: #333;
				min-height: 40rpx;
				display: flex;
				align-items: center;

				input,
				textarea {
					flex: 1;
					font-size: 28rpx;
					border: none;
					outline: none;
					padding: 0;
					margin: 0;
					background: transparent;
					box-sizing: border-box;
				}

				textarea {
					height: auto;
					min-height: 168rpx;
					line-height: 1.5;
				}
			}
		}

		.signature-label-text {
			text-align: center;
			color: #999;
			font-size: 24rpx;
			margin-top: 20rpx;
			margin-bottom: 10rpx;
		}

		.signature-section {
			display: flex;
			align-items: flex-start;
			margin-top: 0rpx;
			margin-bottom: 30rpx;

			.image-grid {
				flex: 1;
				display: flex;
				flex-wrap: wrap;
				gap: 10rpx;

				.seal-image {
					width: 120rpx;
					height: 120rpx;
					object-fit: contain;
					border: none;
					border-radius: 8rpx;
				}
			}
		}
	}
</style> 